<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>注册</title>
</head>
<body>
    <h1>通过AJAX注册成为2013的会员</h1>    
    用户名：<input type="text" id="username" onblur="checkUser()" />
    <span id="userMsg"></span><br/>
    密  码：<input type="password" id="userpass" /><br/>
	重复密码：<input type="text"/><br/>
	性  别 ： <input type="radio" name="sex" value="女" checked />女
	         <input type="radio" name="sex" value="男"/>男<br/>   
    <input type="button"  value="注册" onClick="regSave()" />
    <span id="msg"></span>
</body>
</html>
<script>
// 验证用户名是否存在
function checkUser(){
	// 1、创建XMLHttpRequest();
    let xhr = new XMLHttpRequest();
    //console.log("new完了，xhr.readyState",xhr.readyState); //0  对象状态值
    // 2、open()方法，是设置请求方式，请求地址，是否异步
    xhr.open("get","checkuser.php?username="+document.getElementById("username").value,true);
	//console.log("open()完了，xhr.readyState",xhr.readyState);//1
	// 3、onreadystatechange：设置回调函数（后端有响应了，会触发该事件）
    xhr.onreadystatechange = function(){
		// console.log("onreadystatechange里，也就是到了后端，xhr.readyState",xhr.readyState);//1
		// xhr.readyState==4:表示请求响应完毕。
		// xhr.status==200：表示，结果没有问题。
        if(xhr.readyState==4 && xhr.status==200){
			// xhr.responseText 
            if(xhr.responseText==1){
                getId("userMsg").innerHTML = "该用户名已被使用了";
            }else{
                getId("userMsg").innerHTML = "该用户名可以使用";
            }            
        }
    }
	 // 4、send():发送
    xhr.send();
}


function regSave(){
    let xhr = new XMLHttpRequest();
    
    xhr.open("post","regSaveByAjax.php",true);//

    xhr.onreadystatechange = function(){        
        if(xhr.readyState==4 && xhr.status==200){
            if(xhr.responseText==1){
                getId("msg").innerHTML = "注册成功！请<a href='login.html'>登录</a>";
            }else{
                getId("msg").innerHTML = "注册失败！";
            }            
        }
    }
    xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    let params = `username=${getId("username").value}&userpass=${getId("userpass").value}`;    
    // console.log("params",params);
    xhr.send(params);
}

function getId(str){
    return document.getElementById(str);
}

</script>
<!-- form表单提交用submit  会刷新页面
AJAX方式提交用button   只会更新部分信息-->
<!-- 
	action:提交数据的位置
	method:数据提交的方式,默认不写get
	post:武装押运,保密型数据,效率低,安全性高，传输数据量大
	get:五菱宏光,不需要保密的数据,安全性低，效率高，传输量小
	name:前端传递给后端数据的key,前后端的约定
 -->
 

<!-- regByAjax.html--checkuser.php--regSaveByAjax.php
login.html--loginCheck.php -->